<template>
  <div class="car-information info-1200">
        <div class="info-title">
              <div class="info-name">
                    <img src="./../../../static/img/index/cheyuanxinxi.png">
                    <span>车源信息</span>
              </div>
              <div class="info-links">
                    <nuxt-link to="./../info/vehicle">更多车源信息</nuxt-link>
              </div>
        </div>
        <div class="car-infomation-main">
              <div class="c-hot-city">
                    <div class="hot-title">
                          <span>热门城市</span>
                          <img src="./../../../static/img/index/hot.png">
                    </div>
                    <ul>
                      <li :class="'全部'===cityType?'on':''" @click="allCityClick(cityTab)">全部</li>
                      <li v-for="(item,index) in cityTab" :class="item.dictValue===cityActive?'on':''" :key="index" @click="cityClick(item.dictValue)">{{item.dictValue}}</li>
                    </ul>
              </div>
              <div class="car-watch-more">
                      
                      <div class="car-type-tabs">
                            <a-tabs defaultActiveKey="0" @change="typeTab">
                                  <a-tab-pane tab="本地车" key="0"></a-tab-pane>
                                  <a-tab-pane tab="回程车" key="1"></a-tab-pane>
                                  <!-- <a-tab-pane tab="同城配送" key="3"></a-tab-pane> -->
                            </a-tabs>
                      </div>
                      <div class="carinformation-list-content">
                            <div class="car-vehicle-tabs">
                                  <a-tabs type="card" @change="carTab">
                                      <a-tab-pane v-for="(item,index) in carTypeList" :tab="item.dictValue" :value="index" :key="item.dictKey"></a-tab-pane>
                                  </a-tabs>
                                  <!-- <nuxt-link to="/" class="moreStyle"  style="float: right; margin-top: -15px">更多</nuxt-link> -->
                            </div>
                            <carinformation-list :list="list"></carinformation-list>
                      </div>
              </div>
        </div>
  </div>
</template>
<script>
  import carinformationList from './CarinformationList'
  import { configDictionary } from '@/utils/configDictionary'
  export default {
    data() {
      return {
        // 车输类型
        carTypeList: [],
        cityActive: '',
        type: 0,
        carType: 0,
        list: [],
        // cityTab: configDictionary.hotCity,
        cityTab:[],
				cityType:'',
      }
    },
    components: {
       carinformationList
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
      this.infoCommonDict(5);
      this.infoCommonDict(26);
    },
    watch: {},

    mounted: function() {

    },
    methods: {
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageIndex: 1
          })
          if (res.status) {
            switch(type){
              case 5: 
                this.carTypeList = res.data.rows; 
                this.carType = res.data.rows[0].dictType;
                break;
							case 26: 
							  this.cityTab = res.data.rows; 
							  break;
            }
          }
          // 获取到车辆类型后加载数据
          // this.infoCarGetCargoByType(0);
          this.allCityClick(this.cityTab);
      },
      // 获取车源分类列表查询
      async infoCarGetCargoByType () {
          const res = await this.$store.dispatch('info/infoCarGetCargoByType',{
            pageSize: 4,
            pageIndex: 1,
            departureCity: this.cityActive,
            type: this.type,
            vehicleType: this.carType,
						cityType:this.cityType,
          })
          if (res.status) {
            this.list = res.data && res.data.rows || [];
          } 
      },
      // 本地回程切换
      typeTab (key) {
        this.type = key;
        this.infoCarGetCargoByType();
      },
      // 城市切换查询
      cityClick (item) {
				this.cityType = ''
        this.cityActive = item;
        console.log(this.cityActive,1234444)
        this.infoCarGetCargoByType();
      },
			allCityClick(item){
				this.cityType = '全部'
				let data = []
				for(var i in item){
					data.push(item[i].dictValue)
				}
				this.cityActive = data+'';
				this.infoCarGetCargoByType();
			},
      // 车型切换事件
      carTab(key) {
        this.carType = key;
        this.infoCarGetCargoByType()
      },
    }
  }
</script>
<style lang="scss">
.car-information{
  clear:both;
  .info-title{
    border-bottom:1px solid #D8D8D8;
  }
  .car-watch-more{
    position:relative;
    .moreStyle{
      position:absolute;
      font-size:14px;
      font-weight:400;
      color:#666666;
      position:absolute;
      right: 20px;
      top: 20px;
      z-index:9;
    }
  }
  .car-infomation-main{
    position:relative;
    //热门城市
    .c-hot-city{
         width:210px;
         height:315px;
         position:absolute;
         top:50%;
         top: 16%;
         margin-top: -1px;
         border:1px solid #D8D8D8;
         z-index: 2;
         .hot-title{
          margin-top:10px;
          margin-left:10px;
          span{
            font-size:18px;
            color:#333333;
            font-weight:400;
            vertical-align:middle;
            margin-right:10px;
          }
          img{
            vertical-align:middle;
          }
         }
         ul {
          margin-top:12px;
          li{
            float:left;
            margin-right:10px;
            margin-left:10px;
            line-height:25px;
            cursor: pointer;
          }
          li.on{
            color: #15837A;
          }
         }
    }
     .carinformation-list-content{
          position: absolute;
          width: 990px;
          right: 0;
          top: 74px;

          ul{
            margin-top: 30px;
            li{
              float:left;
              margin-right:28px;
            }
          li:first-child{
            margin-left:28px;
          }
          .car-price{
            text-align:center;
            div{
              font-size:14px;
              color:#333333;
              margin:0;
            }
            i{
              font-style:normal;
              font-size:26px;
              color:#FFA200;
              font-weight:500;
            }
            span{
              font-size:16px;
              color:#666666;
            }
          }
          .car-kg{
            margin-top:8px;
            text-align:center;
            span{
              font-size:14px;
              color:#666666;
            }
            span:last-child{
              margin-left:8px;
            }
          }
       }
     }
  }
  .car-pic{
       width:184px;
       height:121px;
        img{
            width:100%;
            height:100%;
        }
  }
  .ant-tabs-tab-active{
    color:#FFFFFF  !important;
    background-color:#FFA200;
  }
  .ant-tabs-tab{
        height:30px;
        border-radius:2px;
        margin:0 !important;
        padding: 0 10px !important;
        font-size:16px;
        text-align:center;
        line-height:30px;
        color:#333333;
  }
  .car-type-tabs{
    .ant-tabs{
        width:1200px;
      .ant-tabs-bar{
        border-bottom:none !important;
      }
      .ant-tabs-ink-bar{
        background-color:none !important;
        right:0 !important;
      }
      .ant-tabs-left-content{
          padding-left:0 !important;
        }
        .ant-tabs-ink-bar{
        height:0 !important;
        bottom:0 !important;
        right:0 !important;
      }
      .ant-tabs-left-content{
          padding-left:0 !important;
        }
        .ant-tabs-nav-wrap{
          margin-bottom:0 !important;
          margin-top: 12px;
          margin-left:10px;
        }
    }
  }
  .car-vehicle-tabs{
      height: 24px;
      .ant-tabs-bar{
        border: none;
      }
      .ant-tabs-nav-wrap{
        margin-top: 10px;
      }
      .ant-tabs{
        .ant-tabs-content{
          border:none !important;
        }
        .ant-tabs-content{
          width:990px;
          height:0;
          float:left;
        }
        .ant-tabs-tab{
          height:24px;
          line-height:24px !important;
          border:none !important;
          color:#666666 !important;
          font-size:14px;
          background:none;
          border-radius:2px;
          margin-left:10px !important;
        }
        .ant-tabs-tab-active{
          color:#FFFFFF !important;
          background-color:#15837A !important;
        }
      }
  }
  //展示内容
  .ant-tabs-content,.carinformation-list{
    width:990px;
    height:315px;
    border-top:1px solid #D8D8D8;
    border-right:1px solid #D8D8D8;
    border-bottom:1px solid #D8D8D8;
    float:right;
    margin-top: 1px;
  }
    .ant-tabs-tab:active{
      color:#FFFFFF !important;
    }
    .ant-tabs-nav .ant-tabs-tab:hover{
      color:#000;
    }
}
</style>